<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
收集表单数据：当我们在网站上输入信息以后如果我们需要使用Vue来做数据的处理
那么我们必须将数据收集到Vue对象中
收集表单时收集的通常都是表单元素的value值
v-model的修饰符
 number 将绑定的值转为有效数字
 trim  去除首尾空格
 lazy 懒加载 当框失去光标的时候再收集数据 节约性能和资源

-->


<div id="app">
    <!--定义表单收集数据-->
    <form>
        账号：<input type="text" v-model.trim="student.account"> <br>
        密码：<input type="password" v-model="student.password"><br>
        年龄：<input type="number" v-model.number="student.age"><br>
        性别：
        <input type="radio" name="sex" value="man" v-model="student.sex" >男
        <input type="radio" name="sex" value="women" v-model="student.sex">女
        <br>
        爱好：
        <input type="checkbox" value="study" v-model="student.hobby">学习
        <input type="checkbox" value="game" v-model="student.hobby">打游戏
        <input type="checkbox" value="sing" v-model="student.hobby">唱歌 <br>
        毕业学校：
        <select v-model="student.school">
            <option value="">请选择学校</option>
            <option value="lg">理工</option>
            <option value="yk">医科</option>
        </select>
        <br>
        其他信息：
        <textarea v-model.lazy="student.others"></textarea><br>
        <input type="checkbox" v-model="student.agree">
        我同意，....以上所有数据提交的<a href="http://www.baidu.com">协议</a>.... <br>
        <button @click="submit()">提交</button>
    </form>


</div>

<script>
    new Vue({
        el:'#app',
        data(){
            return{
                //准备收集数据的对象(数据模型)
                student:{
                    //属性和表单对应
                    account:'',//账号
                    password:'',//密码
                    age:0,//年龄
                    sex:'',//性别
                    hobby:[],//爱好
                    school:'',//学校
                    others:'',//其他
                    agree:''//是否同意
                }

            }
        },
        methods:{
            submit(){
                //提交
                //axios.post("新增的地址",this.student).then();
            }
        }

    });

</script>

</body>
</html>